<template>
  <div>
    <!--  2018/8/23 zhangQ -->
    <tablePage ref="flowDetailTabRef" :api="getMinorCycleStationDetail" :param="tabParam" sortName="endStationTime" sort-type="desc" :isStartLoad="detailObj.firstload">
      <template slot-scope="props">
        <Table :columns="detailObj.cloumn" border :data="props.data" :height="500"></Table>
      </template>
      <!--<div slot="footer"><span>总条数：平均值：</span></div>-->
    </tablePage>
    <Row>
      <i-col>
        <Button type="primary" @click="exportMinorCycleStationDetailExcel" style="float: right;">
          <Icon type="ios-download-outline"></Icon>
          导出数据
        </Button>
      </i-col>
    </Row>
  </div>
</template>

<script>
  import tablePage from '@/components/table/tablePage'
  import { getMinorCycleStationDetail } from '@/api/containerPlatform/report'
  import { exportUtil } from '@/vendor/exportInvoke'

  export default {
    name: 'flowReportDetail',
    data () {
      let detailObj = {
        firstload: false,
        cloumn: [
          {
            title: '箱号',
            width: 200,
            key: 'containerNo'
          },
          {
            title: '箱属',
            width: 250,
            key: 'userName'
          },
          {
            title: '发站',
            width: 200,
            key: 'sendStationName'
          },
          {
            title: '发出时间',
            width: 200,
            key: 'startStationTime'
          },
          {
            title: '发货人',
            width: 250,
            key: 'sender'
          },
          {
            title: '到站',
            width: 150,
            key: 'endStationName'
          },
          {
            title: '到达时间',
            width: 200,
            key: 'endStationTime'
          },
          {
            title: '收货人',
            width: 250,
            key: 'receiver'
          },
          {
            title: '当前站',
            width: 200,
            key: 'curPosition'
          },
          {
            title: '状态',
            width: 80,
            key: 'endStationTime',
            render: (h, params) => {
              let endStationTime = params.row.endStationTime
              if (endStationTime) {
                return (<span>{'在站'}</span>)
              } else {
                return (<span>{'在途'}</span>)
              }
            }
          },
          {
            title: '货票号',
            width: 100,
            key: 'waybillNo'
          },
          {
            title: '运费',
            width: 100,
            key: 'totalFee'
          },
          {
            title: '品名',
            width: 300,
            key: 'dwPm'
          },
          {
            title: '在途时间',
            width: 80,
            key: 'waytime',
            render: (h, params) => {
              if (params.row.waytime) {
                return (<span>{params.row.waytime.toFixed(2) + ' h'}</span>)
              }
            }
          },
          {
            title: '在站时间',
            width: 80,
            key: 'timespan',
            render: (h, params) => {
              if (params.row.timespan) {
                return (<span>{params.row.timespan.toFixed(2) + ' h'}</span>)
              }
            }
          }
        ],
        data: []
      }
      let tabParam = {}
      let datas = { detailObj, getMinorCycleStationDetail, tabParam }
      return datas
    },
    props: { searchObj: {}, currentObj: {} },
    computed: {},
    methods: {
      exportMinorCycleStationDetailExcel () {
        let param = this.tabParam
        param.pageSize = 0
        param.pageNumber = 0
        getMinorCycleStationDetail(param).then(res => {
          if (res.data.isSuccess === 1) {
            let rstData = res.data.data.rows
            let result = this.fasetJson(rstData)
            exportUtil.export2Excel(this.tabParam.stationName + '效率分析详情', result.columns, result.data)
          }
        })
      },
      fasetJson (tabData) {
        let result = {
          columns: [
            { title: '箱号', key: 'containerNo' },
            { title: '箱属', key: 'userName' },
            { title: '发站', key: 'sendStationName' },
            { title: '发出时间', key: 'startStationTime' },
            { title: '发货人', key: 'sender' },
            { title: '到站', key: 'endStationName' },
            { title: '到达时间', key: 'endStationTime' },
            { title: '收货人', key: 'receiver' },
            { title: '当前站', key: 'curPosition' },
            { title: '状态', key: 'status' },
            { title: '货票号', key: 'waybillNo' },
            { title: '运费', key: 'totalFee' },
            { title: '品名', key: 'dwPm' },
            { title: '在途时间', key: 'waytime' },
            { title: '在站时间', width: 'timespan' }
          ],
          data: []
        }
        tabData.forEach((item) => {
          let dataItem = {
            containerNo: item.containerNo,
            userName: item.userName,
            sendStationName: item.sendStationName,
            startStationTime: item.startStationTime,
            sender: item.sender,
            endStationName: item.endStationName,
            endStationTime: item.endStationTime,
            receiver: item.receiver,
            curPosition: item.curPosition,
            status: item.endStationTime ? '在站' : '在途',
            waybillNo: item.waybillNo,
            totalFee: item.totalFee,
            dwPm: item.dwPm,
            waytime: item.waytime.toFixed(2) + ' h',
            timespan: item.timespan.toFixed(2) + ' h'
          }
          result.data.push(dataItem)
        })
        return result
      },
      dataRefreshAction () {
        this.$refs['flowDetailTabRef'].dataRefresh(this.tabParam)
      },
      /**
       * TODO(获得详细信息的统计信息)
       * @auther zhangQ
       * @date 2018/8/23 19:34
       */
      getDetailCountData () {
        getMinorCycleStationDetail()
          .then(res => {
            if (+res.data.isSuccess === 1) {
              this.$Notice.success({
                title: '获取成功！'
              })
              this.detailObj.data = res.data.data
            }
          })
      }
    },
    created () {
    },
    mounted () {
      this.tabParam = Object.assign({}, this.searchObj)
      this.tabParam.stationName = this.currentObj.endStationName
      this.dataRefreshAction()
    },
    components: { tablePage }
  }
</script>

<style scoped>

</style>
